<template>
  <div class="city">
    <input type="text" placeholder="请输入城市名称" v-model="searchAddress" @blur="handleBlur" />
    <ul v-if="searchAddress" class="search">
      <li v-if="searchStatus == 0">似乎没有找到你查找的城市</li>
      <li v-else-if="searchStatus == 1" @click="hanleView">{{ searchCity }}</li>
      <li v-else-if="searchStatus == 2"></li>
    </ul>
    <div v-if="data && !searchAddress" class="weather-data">
      <ul class="weather-list">
        <li v-for="item in data" :key="item.adcode">
          <div class="weather-icon">
            <span>{{ item.city }}</span>
            <span>{{ item.temperature }}度</span>
          </div>
          <div class="btn">
            <button @click="hanleClick(item.city)">查看</button>
            <button @click="handleDelete(item.id)">删除</button>
          </div>
        </li>
      </ul>
    </div>
    <p v-if="!searchAddress && !data">暂时没有保存过城市天气信息,请查询后点击右上角"+"号保存</p>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { watch, ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/strores/useWeatherStore'
const weather = useWeatherStore()
const { getSearchAddress } = weather
const { searchAddress, searchStatus, searchCity } = storeToRefs(weather)
const router = useRouter()
const data = ref([])
const hanleView = () => {
  router.push({ name: 'about', params: { city: searchCity.value } })
}
const hanleClick = (city) => {
  router.push({ name: 'about', params: { city: city } })
}
const handleDelete = (id) => {
  console.log(id)
  console.log(data.value)
  // data.value = ref(JSON.parse(localStorage.getItem('data')))
  data.value = data.value.filter((item) => item.id !== id)
  localStorage.setItem('data', JSON.stringify(data.value))
}

const handleBlur = () => {
  setTimeout(() => {
    searchAddress.value = ''
  }, 100)
}
watch(searchAddress, () => {
  searchStatus.value = 2
  setTimeout(() => {
    getSearchAddress(searchAddress.value)
  }, 1000)
})
onMounted(() => {
  data.value = JSON.parse(localStorage.getItem('data'))
  // localStorage.clear();
})
</script>

<style lang="scss" scoped>
.city {
  padding-top: 1rem;
  margin-bottom: 2rem;
  input {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
    background-color: transparent;
    border: none;
    color: rgb(255 255 255);
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    border-bottom-width: 1px;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    &:focus {
      outline: none; /* 移除轮廓线 */
      box-shadow: none; /* 移除阴影效果 */
    }
  }
  .weather-data {
    margin-top: 2.5rem;
    // padding: 0.5rem 1rem;
    .weather-list {
      li {
          margin-bottom: 1rem;
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        .weather-icon {
          padding: 0.5rem 1rem;
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          background-color: rgb(0 78 113);
          transition-duration: 0.3s;
        }
        .btn{
          display: none;
          // display: flex;
          gap: 0.5rem;
          button{
            width: 80px;
            text-align: center;
            border: none;
            background-color: rgb(234 179 8 );
            color: white;
            cursor: pointer;
          }
        }
        &:hover {
          .btn{
            display: flex;
          }
          .weather-icon{
            width: 80%;
          }
       }
      }
    }
  }
  .search {
    background-color: rgb(0 78 113);
    padding: 0 4px;
    li {
      list-style-type: none;
      padding: 10px 0;
    }
  }
}
p {
  text-align: center;
}
</style>
